// @ts-nocheck
import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import axios from 'axios'

class Search extends Component {

  search = async () => {
    // Pubsub

    try {
      // 获取用户输入 发送请求
      const { keyWordElement: { value: keyword } } = this
      // console.log (keyword)

      PubSub.publish('atguigu', { isFirst: false, isLoading: true })
      const { data: res } = await axios.get(`http://localhost:3000/api1/search/users?q=${keyword}`)
      // 传给List

      PubSub.publish('atguigu', { isFirst: false, isLoading: false, users: res.items })
    } catch (e) {
      PubSub.publish('atguigu', { isLoading: false, err: e.message })
    }


    // axios方式---------
    // try {
    //   // 获取用户输入 发送请求
    // const {keyWordElement: {value: keyword}} = this
    // // console.log (keyword)
    // this.props.updateAppState ({isFirst: false,isLoading: true })
    // const {data: res} = await axios.get (`http://localhost:3000/api1/search/users?q=${keyword}`)
    // // 传给List
    // this.props.updateAppState ({isFirst: false,isLoading: false, users: res.items })
    // } catch (e) {
    //   this.props.updateAppState ({isLoading: false, err: e.message })
    // }
  }

  render() {
    return (
      <section className="jumbotron">
        <h3 className="jumbotron-heading">Search Github Users</h3>
        <div>
          <input ref={c => this.keyWordElement = c} type="text" placeholder="enter the name you search" />&nbsp;
          <button onClick={this.search}>Search</button>
        </div>
      </section>
    )
  }
}


export default Search;
